﻿<#include "layout.ftl"/>
<#macro script_import>

<script src="${staticPath}/markdown/markdown-it.js"></script>
<script src="${staticPath}/markdown/markdown-it-footnote.js"></script>
<script src="${staticPath}/markdown/highlight.pack.js"></script>
<script src="${staticPath}/markdown/codemirror/lib/codemirror.js"></script>
<script src="${staticPath}/markdown/codemirror/overlay.js"></script>
<script src="${staticPath}/markdown/codemirror/xml/xml.js"></script>
<script src="${staticPath}/markdown/codemirror/markdown/markdown.js"></script>
<script src="${staticPath}/markdown/codemirror/gfm/gfm.js"></script>
<script src="${staticPath}/markdown/codemirror/javascript/javascript.js"></script>
<script src="${staticPath}/markdown/codemirror/css/css.js"></script>
<script src="${staticPath}/markdown/codemirror/htmlmixed/htmlmixed.js"></script>
<script src="${staticPath}/markdown/codemirror/lib/util/continuelist.js"></script>
<script src="${staticPath}/markdown/rawinflate.js"></script>
<script src="${staticPath}/markdown/rawdeflate.js"></script>
<link rel="stylesheet" href="${staticPath}/markdown/base16-light.css">
<link rel="stylesheet" href="${staticPath}/markdown/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="${staticPath}/markdown/default.css">
<link rel="stylesheet" href="${staticPath}/css/dropzone.min.css" rel="stylesheet">

<!--Demo script [ DEMONSTRATION ]-->
<script src="${staticPath}/js/nifty-demo.min.js"></script>


<!--Dropzone [ OPTIONAL ]-->
<script src="${staticPath}/js/dropzone.min.js"></script>


<!--Form File Upload [ SAMPLE ]-->
<script src="${staticPath}/js/form-file-upload.js"></script>


<script src="${staticPath}/js/bootstrapvalidator.min.js"></script>



<script src="${staticPath}/page-js/article_add.js"></script>
</#macro>
<#macro css_import>
<link href="${staticPath}/css/bootstrapvalidator.min.css" rel="stylesheet">



</#macro>
<#macro script>
<script type="text/javascript">

    // Because highlight.js is a bit awkward at times
    var languageOverrides = {
        js: 'javascript',
        html: 'xml'
    };


    var md = markdownit({
        html: true,
        highlight: function (code, lang) {
            if (languageOverrides[lang]) lang = languageOverrides[lang];
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return hljs.highlight(lang, code).value;
                } catch (e) {
                }
            }
            return '';
        }
    })
            .use(markdownitFootnote);


    function update(e) {
        setOutput(e.getValue());
    }

    function setOutput(val){
        val = val.replace(/<equation>((.*?\n)*?.*?)<\/equation>/ig, function(a, b){
            return '<img src="http://latex.codecogs.com/png.latex?' + encodeURIComponent(b) + '" />';
        });

        var out = document.getElementById('out');
        var old = out.cloneNode(true);
        var newhtml = md.render(val);
        out.innerHTML = newhtml;

        //把值付给表单
        $("#markdownText").val(val);
        $("#text").val(newhtml);

        var allold = old.getElementsByTagName("*");
        if (allold === undefined) return;

        var allnew = out.getElementsByTagName("*");
        if (allnew === undefined) return;

        for (var i = 0, max = Math.min(allold.length, allnew.length); i < max; i++) {
            if (!allold[i].isEqualNode(allnew[i])) {
                out.scrollTop = allnew[i].offsetTop;
                return;
            }
        }
    }
    var editor = CodeMirror.fromTextArea(document.getElementById('content_html'), {
        mode: 'gfm',
        lineNumbers: false,
        matchBrackets: true,
        lineWrapping: true,
        theme: 'base16-light',
        extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
    });

    editor.on('change', update);


    document.addEventListener('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();

        var reader = new FileReader();
        reader.onload = function (e) {
            editor.setValue(e.target.result);
        };

        reader.readAsText(e.dataTransfer.files[0]);
    }, false);
</script>
</#macro>
<#macro css>
<style>

    .CodeMirror pre{
        line-height: 16px;
    }


    .CodeMirror {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
    }

    .CodeMirror-scroll {
        padding: 30px;
        box-sizing: border-box;
    }

    #out{
        overflow: auto;
        padding: 10px;
        padding-left: 20px;
        color: #444;
        font-size: 16px;
    }



    .cm-quote { color: #90a959; font-style: italic; }


    a{ color: #0645ad; text-decoration:none;}
    a:visited{ color: #0b0080; }
    a:hover{ color: #06e; }
    a:active{ color:#faa700; }
    a:focus{ outline: thin dotted; }
    a:hover, a:active{ outline: 0; }

    p{margin:1em 0;}

    /*img{max-width:100%;}*/

    h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;line-height:1em;}
    h4,h5,h6{ font-weight: bold; }
    h1{ font-size:2.5em; }
    h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
    h3{ font-size:1.5em; }
    h4{ font-size:1.2em; }
    h5{ font-size:1em; }
    h6{ font-size:0.9em; }

    blockquote{color:#666666;margin:0;padding-left: 3em;border-left: 0.5em #EEE solid;}
    hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }

    #out pre, code{
        color: #FF0000;
        font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;
        font-size: 0.94em; /* 0.94 = 0.88 + (1.00 - 0.88) / 2 */
        border-radius:3px;
        background-color: #F8F8F8;
        border: 1px solid #CCC;
    }
    pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
    pre code { border: 0px !important; background: transparent !important; line-height: 1.3em; }
    code { padding: 0 3px 0 3px; }
    sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
    ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
    li p:last-child { margin:0 }
    dd { margin: 0 0 0 2em; }
    img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
    table { border-collapse: collapse; border-spacing: 0; }
    td, th { vertical-align: top; padding: 4px 10px; border: 1px solid #bbb; }
    tr:nth-child(even) td, tr:nth-child(even) th { background: #eee; }
</style>
</#macro>

<#macro aside_container>
<!--ASIDE-->
<!--===================================================-->
<aside id="aside-container">
    <div id="aside">
        <div class="nano">
            <div class="nano-content">

                <!--Nav tabs-->
                <!--================================-->
                <ul class="nav nav-tabs nav-justified">
                    <li class="active">
                        <a href="#demo-asd-tab-1" data-toggle="tab">
                            <i class="demo-pli-speech-bubble-7"></i>
                        </a>
                    </li>

                </ul>
                <!--================================-->
                <!--End nav tabs-->


                <!-- Tabs Content -->
                <!--================================-->
                <div class="tab-content">

                    <!--First tab (Contact list)-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <div class="tab-pane fade in active" id="demo-asd-tab-1">
                        <p class="pad-hor mar-top text-semibold text-main">
                            <span class="pull-right badge badge-warning">3</span> Family
                        </p>

                        <!--Family-->
                        <div class="list-group bg-trans">
                            <a href="#" class="list-group-item">
                                <div class="media-left pos-rel">
                                    <img class="img-circle img-xs" src="${staticPath}/picture/2.png"
                                         alt="Profile Picture">
                                    <i class="badge badge-success badge-stat badge-icon pull-left"></i>
                                </div>
                                <div class="media-body">
                                    <p class="mar-no">Stephen Tran</p>
                                    <small class="text-muted">Availabe</small>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-left pos-rel">
                                    <img class="img-circle img-xs" src="${staticPath}/picture/7.png"
                                         alt="Profile Picture">
                                </div>
                                <div class="media-body">
                                    <p class="mar-no">Brittany Meyer</p>
                                    <small class="text-muted">I think so</small>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-left pos-rel">
                                    <img class="img-circle img-xs" src="${staticPath}/picture/1.png"
                                         alt="Profile Picture">
                                    <i class="badge badge-info badge-stat badge-icon pull-left"></i>
                                </div>
                                <div class="media-body">
                                    <p class="mar-no">Jack George</p>
                                    <small class="text-muted">Last Seen 2 hours ago</small>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-left pos-rel">
                                    <img class="img-circle img-xs" src="${staticPath}/picture/4.png"
                                         alt="Profile Picture">
                                </div>
                                <div class="media-body">
                                    <p class="mar-no">Donald Brown</p>
                                    <small class="text-muted">Lorem ipsum dolor sit amet.</small>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-left pos-rel">
                                    <img class="img-circle img-xs" src="${staticPath}/picture/8.png"
                                         alt="Profile Picture">
                                    <i class="badge badge-warning badge-stat badge-icon pull-left"></i>
                                </div>
                                <div class="media-body">
                                    <p class="mar-no">Betty Murphy</p>
                                    <small class="text-muted">Idle</small>
                                </div>
                            </a>
                            <a href="#" class="list-group-item">
                                <div class="media-left pos-rel">
                                    <img class="img-circle img-xs" src="${staticPath}/picture/9.png"
                                         alt="Profile Picture">
                                    <i class="badge badge-danger badge-stat badge-icon pull-left"></i>
                                </div>
                                <div class="media-body">
                                    <p class="mar-no">Samantha Reid</p>
                                    <small class="text-muted">Offline</small>
                                </div>
                            </a>
                        </div>

                        <hr>
                        <p class="pad-hor text-semibold text-main">
                            <span class="pull-right badge badge-success">Offline</span> Friends
                        </p>

                        <!--Works-->
                        <div class="list-group bg-trans">
                            <a href="#" class="list-group-item">
                                <span class="badge badge-purple badge-icon badge-fw pull-left"></span> Joey K. Greyson
                            </a>
                            <a href="#" class="list-group-item">
                                <span class="badge badge-info badge-icon badge-fw pull-left"></span> Andrea Branden
                            </a>
                            <a href="#" class="list-group-item">
                                <span class="badge badge-success badge-icon badge-fw pull-left"></span> Johny Juan
                            </a>
                            <a href="#" class="list-group-item">
                                <span class="badge badge-danger badge-icon badge-fw pull-left"></span> Susan Sun
                            </a>
                        </div>


                        <hr>
                        <p class="pad-hor mar-top text-semibold text-main">News</p>

                        <div class="pad-hor">
                            <p class="text-muted">Lorem ipsum dolor sit amet, consectetuer
                                <a data-title="45%" class="add-tooltip text-semibold" href="#">adipiscing elit</a>, sed
                                diam nonummy nibh. Lorem ipsum dolor sit amet.
                            </p>
                            <small class="text-muted"><em>Last Update : Des 12, 2014</em></small>
                        </div>


                    </div>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End first tab (Contact list)-->

                </div>
            </div>
        </div>
    </div>
</aside>
<!--===================================================-->
<!--END ASIDE-->
</#macro>

<@layout>


        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="page-header text-overflow">撰写文章</h1>

                <!--Searchbox-->
                <div class="searchbox">
                    <div class="input-group custom-search-form">
                        <input type="text" class="form-control" placeholder="Search..">
                            <span class="input-group-btn">
                                <button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>
                            </span>
                    </div>
                </div>
            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->


            <!--Breadcrumb-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li class="active">撰写文章</li>
            </ol>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End breadcrumb-->


            <!--Page content-->
            <!--===================================================-->

            <div id="page-content">

                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">基础信息</h3>
                    </div>

                    <!--Block Styled Form -->
                    <!--===================================================-->

                        <div class="panel-body">
                            <form id="basic-form">
                            <input type="hidden" id="attachmentId" name="attachmentId" value="0">
                            <div class="row">

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">标题</label>
                                        <div class="input-group mar-btm">
                                            <div class="input-group-btn">
                                                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">
                                                    类别 <i class="dropdown-caret"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <#list category as item>
                                                        <li><a href="#" cate-id="${item.id}">${item.title}</a></li>
                                                    </#list>
                                                    <li class="divider"></li>

                                                </ul>
                                            </div>
                                            <input type="hidden" data-validate="true" id="parentId" name="parentId">
                                            <input type="text"  id="title" name="title" placeholder="标题" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">标签</label>
                                        <input type="text" id="tag" name="tag" placeholder="标签" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label class="control-label">摘要</label>
                                    <textarea placeholder="摘要" id="summary" name="summary" rows="5" class="form-control"></textarea>
                                </div>
                            </div>

                            </form>
                        </div>
                    <!--===================================================-->
                    <!--End Block Styled Form -->

                </div>

                <div class="panel">

                    <div class="panel-body">
                        <div class="row">
                            <label class="control-label">缩略图</label>
                        </div>
                        <!--Dropzonejs-->
                        <!--===================================================-->
                        <form id="demo-dropzone" action="${basePath}/attachment/upload" class="dropzone">
                            <div class="dz-default dz-message">
                                <div class="dz-icon">
                                    <i class="demo-pli-upload-to-cloud icon-5x"></i>
                                </div>
                                <div>
                                    <span class="dz-text">Drop files to upload</span>
                                    <p class="text-sm text-muted">or click to pick manually</p>
                                </div>
                            </div>
                            <div class="fallback">
                                <input name="file" id="file" type="file">
                            </div>

                        </form>
                        <!--===================================================-->
                        <!-- End Dropzonejs -->

                    </div>
                </div>

                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">正文</h3>
                    </div>
                    <!--Bootstrap Markdown-->
                    <!--===================================================-->
                    <div class="panel-body">
                        <form>
                        <p><strong>Bootstrap-Markdown</strong> designed to be easily integrated with your bootstrap
                            project. It exposes useful API that allow you to fully hook-in into the plugin<br>
                            Switch regular textarea within your form into <strong>Bootstrap-Markdown</strong> editor
                            seamlessly by adding <code class="prettyprint">data-provide="markdown"</code> attribute</p>
                        <br>
                            <textarea id="content_html" name="content_html" data-provide="markdown" rows="10"
                                      placeholder="Please Use MarkDown"></textarea>
                            <input type="hidden" name="markdownText" id="markdownText">
                            <input type="hidden" name="text" id="text">
                        <br>
                            <p><strong>预览</strong></p>
                        <div id="out"></div>
                        </form>
                    </div>
                    <!--===================================================-->
                    <!-- End Bootstrap Markdown -->

                </div>

                <div class="panel">

                    <div class="panel-footer text-right">
                        <button class="btn btn-success" type="button" id="submit">Submit</button>
                    </div>

                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


</@layout>
